import React, { Children, useEffect, useState } from "react";
import {
    Button,
    Col,
    Drawer,
    Form,
    Input,
    message,
    Row,
    Table,
    TableProps,
    Tabs,
    Tooltip,
} from 'antd';

import { importTable, listDbTable, previewTable } from "@/clientApi/tool/gen";
// 定义组件的 props 类型
interface MyComponentProps {
    open: boolean;
    handleCancle: (e: any) => void;
    tableId:number|null
}
interface ItemType {
  key: string;
  label: string;
  children: React.ReactNode; // 用于接收JSX元素
}
const preViewView: React.FC<MyComponentProps> = (props) => {
    interface DataType {
    }
    const [open, setOpen] = useState<boolean>(false)//打开弹窗
    const [tables, setTables] = useState<any>(null)
    const [form] = Form.useForm();
    const [items, setItems] = useState<ItemType[]>([]);

    useEffect(() => {
        // setTables(props.tableId)
        setOpen(props.open)
        getList()
    }, [props.open])
    /** 查询用户列表 */
    function getList() {
        previewTable(props.tableId).then((res: any) => {
            setItems([])
            for (let key in res.data){
                setItems(prev => [...prev, {
                    key: key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm')),
                    label: key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm')),
                    children: <pre>{res.data[key]}</pre>
                }]);
            }
        });
    }




    const onChange = (key: string) => {
        console.log(key);
      };
      



    return (
        <Drawer
            title="代码预览"
            placement="right"
            closable={false}
            onClose={() => { setOpen(false), props.handleCancle(false) }}
            open={open}
            footer={
                <div className={"flex justify-end"}>
                    <Button type={"primary"} onClick={() => props.handleCancle(false)}>确认</Button>
                </div>
            }
            width={"70%"}
            key={"right"}
        >
            <div className='home'>
                <Row gutter={20} style={{ paddingTop: "20px" }}>
                    <Col span={24}>

                        <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
                    </Col>
                </Row>
            </div>
        </Drawer>
    )
};
export default preViewView;
